<template>
  <div>
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/department' }">部门管理</el-breadcrumb-item>
          </el-breadcrumb>
          <el-button @click="addDepartment" style="float: right; padding: 3px 0" type="text">+新增</el-button>
        </div>

        <div>
          <el-table
                  v-loading="loading"
                  :data="tableData"
                  style="width: 100%">
            <el-table-column
                    sortable
                    label="Id"
                    prop="departmentId">
            </el-table-column>
            <el-table-column
                    sortable
                    label="DepartmentName"
                    prop="departmentName">
            </el-table-column>
            <el-table-column
                    sortable
                    label="createTime"
                    prop="createTime">
            </el-table-column>
            <el-table-column
                    sortable
                    label="TotalUser"
                    prop="totalUser">
            </el-table-column>
            <el-table-column
                    sortable
                    label="Manager"
                    prop="manager">
            </el-table-column>
            <el-table-column
                    align="right">
              <template slot="header" slot-scope="scope">
                <el-input
                        v-model="search"
                        size="mini"
                        placeholder="输入关键字搜索"
                        @blur="searchUserInfo"/>
              </template>
              <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="page_total">
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  import { getAllDepartment, delDepartment } from "../../network/Department"
  import {delUser, getUser} from "../../network/UserInfo";
  export default {
    name: "Department",
    data() {
      return {
        tableData: [],
        search: '',
        currentPage4: 5,
        page: {
          pageNo: 1,
          pageSize: 5
        },
        page_total: 0,
        loading: true
      }
    },
    beforeMount() {
      this.getAllDepartment()
    },
    methods: {
      // 获取部门信息
      getAllDepartment() {
        getAllDepartment(this.page).then(res => {
              this.tableData = res.data.content;
              this.page_total = res.data.content.length;
              this.page_total = res.data.totalElements
          setTimeout(() => {
            this.loading = false
          },500)
        },
        error => {
          console.log(error)
        });
      },
      // 修改部门信息
      handleEdit(index, row) {
        console.log(row)
        this.$store.commit('setDepartmentData', row)
        this.$router.push("/departmentEdit")
      },
      // 修改分页的大小
      handleSizeChange(val) {
        this.page.pageSize = val
        getAllDepartment(this.page).then(res => {
              this.tableData = res.data.content;
              this.page_total = res.data.content.length;
              this.page_total = res.data.totalElements
              setTimeout(() => {
                this.loading = false
              },500)
            },
            error => {
              console.log(error)
            })
      },
      // 修改当球按页数
      handleCurrentChange(val) {
        this.page.pageNo = val
        getAllDepartment(this.page).then(res => {
              this.tableData = res.data.content;
              this.page_total = res.data.content.length;
              this.page_total = res.data.totalElements
              setTimeout(() => {
                this.loading = false
              },500)
            },
            error => {
              console.log(error)
            })
      },
      // 删除用户信息
      handleDelete(index, row) {
        delDepartment(row.departmentId).then(res => {
              console.log(row.departmentId)
              this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                getAllDepartment(this.page).then(res => {
                      this.tableData = res.data.content;
                      this.page_total = res.data.content.length;
                      this.page_total = res.data.totalElements
                      setTimeout(() => {
                        this.$message.success('删除成功')
                        this.loading = false
                      },500)
                    },
                    error => {
                      console.log(error)
                    })
              }).catch(() => {
                setTimeout(() => {
                  this.$message.success('取消删除')
                  this.loading = false
                },500)
              });
            },
            err => {
              console.log(err);
            })

      },
      // 新增用户
      addDepartment() {
        this.$router.push("/departmentAdd")
      },
    }
  }
</script>

<style scoped>

</style>
